<template>
    <a-drawer title="调整金额" rootClassName="full-modal-drawer" width="40%" :open="adjust_wallet_visible" @close="handleAdjustWalletClose()" :loading="EditLoading">
        <a-form ref="AdjustWalletForm" :model="AdjustWalletFormData" layout="vertical" :rules="AdjustWalletFormDataRule" autocomplete="off">
            <a-form-item label="调整方式" name="type">
                <a-radio-group v-model:value="AdjustWalletFormData.type" name="type">
                    <a-radio v-for="(item,index) in DbMemberWalletTransactionType" :key="index" :value="item.value">{{ item.label }}</a-radio>
                </a-radio-group>
            </a-form-item>
            <a-form-item label="调整金额" name="wallet">
                <a-input v-model:value="AdjustWalletFormData.wallet" placeholder="请输入变更金额" suffix="￥"></a-input>
            </a-form-item>
            <a-form-item label="备注" name="notes">
                <a-textarea v-model:value="AdjustWalletFormData.notes" placeholder="请输入备注"></a-textarea>
            </a-form-item>
        </a-form>
        <template #extra>
            <a-space>
                <a-button @click="handleAdjustWalletClose()">取消</a-button>
                <a-button type="primary" @click="handleOkAdjustWallet()">保存</a-button>
            </a-space>
        </template>
        <a-form ref="searchForm" :model="search" autocomplete="off" @keyup.enter="handleSearch()">
            <iSearch>
                <template #FormData>
                    <a-form-item>
                        <iDateRangePick v-model:value="search.transaction_time" tip="交易时间" @change="handleStart" />
                    </a-form-item>
                </template>
                <template #Button>
                    <a-button type="primary" @click="handleSearch()">查询</a-button>
                    <a-button @click="handleReset">重置</a-button>
                </template>
            </iSearch>
        </a-form>
        <iTable @search="handlePagination" :total="total" :columns="columns" :tableData="tableData" :loading="loading">
            <template #wallet="{ record }">
                <a-popover :title="`调整前：${WalletFiex(record.before_wallet)}；调整后：${WalletFiex(record.after_wallet)}`">
                    <template #content>
                        {{ record.notes || "--" }}
                    </template>
                    <div style="text-decoration: underline;font-weight: 600;margin-right: 10px;cursor: pointer;">
                        <span>{{ record.type == iPb.DbMemberWalletTransactionType.DbMemberWalletTransactionTypeDecrease ? ' - ' : ' ' }}</span>
                        <span>{{ WalletFiex(record.wallet) }}</span>
                    </div>
                </a-popover>
            </template>
        </iTable>
    </a-drawer>
</template>


<script setup lang="ts">
import { watch, reactive, ref } from 'vue';
import { iPb } from '@/protobuf/interface/index'
import { AdjustMemberWallet, ListMemberWalletTransaction } from '@/api/member_wallet_transaction';
import type { TableColumnsType } from 'ant-design-vue';
import { FormInstance } from 'ant-design-vue';
import { TableWidth } from '@/tool/enum';
import { DbMemberWalletTransactionType } from '@/tool/const'
import { WalletFiex } from '@/tool/function'
import { TimeDay } from '@/tool/time'
import { Message } from '@/tool/antdv';
import { Dayjs } from 'dayjs';
const emits = defineEmits(['close'])
const props = defineProps<{
    member_id: number
    visible: boolean
}>()
const loading = ref<Boolean>(false)
const EditLoading = ref<Boolean>(false)
    
const search = ref<iPb.Admin.IListMemberWalletTransactionRequest>(iPb.Admin.ListMemberWalletTransactionRequest.create({
    transaction_time: TimeDay()
}))
const tableData = ref<Array<iPb.IDbMember>>([])
const total = ref<number>(0)

const handlePagination = (e: { current: number | undefined; pageSize: number | undefined; }) => {
    initList(e.current, e.pageSize)
}

const handleSearch = () => {
    initList()
}

const handleReset = () => {
    search.value = iPb.Admin.ListMemberWalletTransactionRequest.create({
        transaction_time: TimeDay()
    })
    initList()
}

const initList = (page = 1, limit = 15) => {
    if(loading.value) {
        return
    }
    loading.value = true
    search.value.limit = limit
    search.value.page = page
    search.value.id = props.member_id
    ListMemberWalletTransaction(iPb.Admin.ListMemberWalletTransactionRequest.create(search.value)).then((result:iPb.Admin.IListMemberWalletTransactionResponse) => {
        let R = iPb.Admin.ListMemberWalletTransactionResponse.create(result)
        tableData.value = R.data
        total.value = R.count
        loading.value = false
    })
}

const adjust_wallet_visible = ref<boolean>(props.visible)

const AdjustWalletForm = ref<FormInstance>()
const AdjustWalletFormData = ref<iPb.Admin.IAdjustMemberWalletMemberRequest>(iPb.Admin.AdjustMemberWalletMemberRequest.create())

const AdjustWalletFormDataRule = reactive({
    type: [
        { required: true, message: '请选择变更类型' }
    ],
    wallet: [
        { required: true, message: '请输入变更金额' },
    ],
})

const handleAdjustWalletClose = () => {
    adjust_wallet_visible.value = false
    emits('close', adjust_wallet_visible.value)
}


const handleStart = (e:Dayjs[]) => {
    search.value.transaction_time = e
}

const handleOkAdjustWallet = () => {
    const formData = AdjustWalletFormData.value
    formData.id = props.member_id
    AdjustWalletForm.value?.validate().then(() => {
        if(EditLoading.value) {
            return
        }
        EditLoading.value = true
        AdjustMemberWallet(formData).then((_result:iPb.Admin.IAdjustMemberWalletMemberResponse) => {
            EditLoading.value = false
            Message.success({
                content: "调整成功",
            })
            initList()
        }).catch(() => {
            EditLoading.value = false
        })
    })
}

const columns:TableColumnsType = [
    {
        title: "会员账号（邮箱）",
        dataIndex: "member_account",
        width: TableWidth.Ordinary,
    },
    {
        title: "交易金额",
        dataIndex: "wallet",
        width: TableWidth.Ordinary,
    },
    {
        title: "交易时间",
        key: "time",
        dataIndex: "transaction_time",
        width: TableWidth.Time,
    },
]


watch(() => props.visible, (val) => {
    adjust_wallet_visible.value = val
    if(val) {
        AdjustWalletForm.value?.resetFields()
        initList()
    }
})


</script>


<style lang="less">
.third-layer {
    .ant-tree-list-holder-inner {
        display: inline-block !important;
    }
}
.last-layer {
    display: inline-flex !important;
}
</style>
